<template>
	<view class="container">
		<view class="user_box">

			<view class="title1">
				<!-- <view class="title1_1">
					<image src="../../static/img/zjt.png" mode="widthFix"></image>
					<text>返回</text>
				</view> -->
				<view class="title1_2">
					<view
						:style="[versionType? {'border': '2rpx solid #999','color': '#1C991D','box-shadow': 'inset 0rpx 0rpx 10rpx 10rpx #eaeaea'}:{}]"
						@click="versionType = true">雇主</view>
					<view
						:style="[versionType? {}:{'border': '2rpx solid #999','color': '#1C991D','box-shadow': 'inset 0rpx 0rpx 10rpx 10rpx #eaeaea'}]"
						@click="versionType = false">兼职</view>
				</view>
			</view>
			<view class="user_Info">
				<up-avatar :src="userInfo.avatar" size="70"></up-avatar>
				<view class="user_name">
					<view class="txt_n"><text>{{userInfo.realName}}</text>
						<text>L{{userInfo.vip}}</text>
					</view>
					<view class="txt_n"><text>可提现余额</text><text>{{userInfo.money}}</text></view>
					<view style="width: 140rpx; margin-top: 20rpx;"><up-button type="success" size="mini" shape="circle"
							text="提现"></up-button></view>
				</view>
			</view>


		</view>
		<view class="notice">
			<up-notice-bar :text="Notice" bgColor="#233553" color="#fff"></up-notice-bar>
		</view>
		<view class="swicth">
			<view>
				<text>服务状态</text>
				<text>（关闭服务后将不接受预约）</text>
			</view>
			<view class="center">
				<up-switch :activeValue="1" :inactiveValue="0" v-model="userInfo.statusService" activeColor="#03c213"
					asyncChange @change="asyncChange"></up-switch>

			</view>
		</view>
		<view class="shuju">
			<view class="shuju1">
				<text>{{userInfo.doneOrderCount?userInfo.doneOrderCount:0}}</text>
				本月成交量
			</view>
			<view style="width: 2rpx;height: 60%;border-left: 2rpx solid #eaeaea;"></view>
			<view class="shuju1">
				<text>{{userInfo.doneOrderThisMonth?userInfo.doneOrderThisMonth:0}}</text>
				本月成交额
			</view>
			<view style="width: 2rpx;height: 60%;border-left: 2rpx solid #eaeaea;"></view>
			<view class="shuju1">
				<text>{{userInfo.serviceVisitCount?userInfo.serviceVisitCount:0}}</text>
				本月访问量
			</view>
		</view>
		<view class="navList">
			<up-grid :border="false" col="4">
				<up-grid-item v-for="(item,index) in navList" :key="index" @click="goPage(item)">
					<up-icon :customStyle="{paddingTop:20+'rpx'}" :color="item.color" :name="item.icon"
						size="64rpx"></up-icon>
					<text class="grid-text">{{item.name}}</text>
				</up-grid-item>
			</up-grid>
		</view>
		<!-- 	<view class="fx">
			<view class="fx_title">
				<view>分销中心</view>
				<view>
					<image src="../../static/img/yjtBlack.png" mode="widthFix"></image>
				</view>
			</view>
			<view style="width: 90%;height: 2rpx;border-bottom: 2rpx solid #eaeaea;margin: 0 auto;"></view>
			<view class="tuList">
				<view>
					<image src="/static/f/07.gif" mode="widthFix"></image>
					<text>2<text style="font-size: 30rpx;color: #888888;">人</text></text>
					<text style="font-size: 30rpx;color: #888888;">我的团队</text>
				</view>
				<view>
					<image src="/static/f/08.gif" mode="widthFix"></image>
					<text>0.00<text style="font-size: 30rpx;color: #888888;">元</text></text>
					<text style="font-size: 30rpx;color: #888888;">待审佣金</text>
				</view>
			</view>
		</view> -->
		<view class="showList">
			<view class="orderList" v-for="(item,index) in list" :key="index" @click="goPage(item)">
				<view class="orderList_title">
					<view>订单号：{{item.orderNo}}</view>
					<view>{{item.createdAt}}</view>
				</view>
				<view class="orderList_content">
					<view class="orderList_content_left">
						<up-image width="120rpx" height="120rpx" :src="JSON.parse(item.serviceSnapshot).icon"
							:lazy-load="true" mode="aspectFill"></up-image>
					</view>
					<view class="orderList_content_right">
						<view class="right_title1">
							<view>{{JSON.parse(item.serviceSnapshot).serviceName}}</view>
							<view>{{JSON.parse(item.serviceSnapshot).serviceTime}}</view>
						</view>
						<view class="content_price">
							<view>￥{{item.money}}</view>
							<view>x{{item.buyCount}}</view>
						</view>
					</view>
				</view>
				<view class="orderList_down">
					<view class="orderList_down_1">
						<view>买家信息</view>
						<up-tag v-if="item.status == 0" text="待付款" plain size="mini" type="error"></up-tag>
						<up-tag v-if="item.status == 1" text="付款成功" plain size="mini" type="success"></up-tag>
						<up-tag v-if="item.status == 2" text="付款失败" plain size="mini" type="warning"></up-tag>
						<up-tag v-if="item.status == 3" text="用户取消" plain size="mini" type="info"></up-tag>
						<up-tag v-if="item.status == 4" text="退款申请中" plain size="mini" type="warning"></up-tag>
						<up-tag v-if="item.status == 5" text="已退款" plain size="mini" type="info"></up-tag>
						<up-tag v-if="item.status == 6" text="已关闭" plain size="mini" type="info"></up-tag>
						<up-tag v-if="item.status == 7" text="服务中" plain size="mini" type="success "></up-tag>
						<up-tag v-if="item.status == 8" type="info" text="订单完成" plain size="mini"></up-tag>
					</view>
					<view class="orderList_down_2">
						<view><up-text mode="name" size="26rpx" type="info"
								:text="JSON.parse(item.addressSnapshot).name" format="encrypt"></up-text>
						</view>
						<view>
							<up-text prefixIcon="phone" size="26rpx" type="info" mode="phone"
								:text="JSON.parse(item.addressSnapshot).mobile" format="encrypt"></up-text>
						</view>
					</view>
					<view class="orderList_down_3">
						<up-text type="info" size="24rpx" :text="`备注：${item.remark}`"></up-text>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 3vh;"></view>
		</view>
	</view>
</template>

<script>
	import {
		getorderListApi,
		orderCheckApi
	} from '@/api/order.js'
	import {
		serverStatusApi
	} from '@/api/service.js'

	import {
		useStore
	} from '@/store/index.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				versionType: true,
				Notice: '上线内测',
				navList: [{
						name: '扫码收款',
						icon: 'scan',
						color: "#16c734",
						url: null,
					},
					{
						name: '订单管理',
						icon: 'order',
						color: "#3c9cff",
						url: '/pages/my/serviceOrder/index'

					},
					{
						name: '服务管理',
						icon: 'grid',
						color: "#3c9cff",
						url: '/pages/my/serviceList/index'
					},
					{
						name: '个人信息',
						icon: 'file-text',
						color: "#3c9cff",
						url: '/pages/my/serviceInfo/index'
					},
					{
						name: '我的钱包',
						color: "#f9ae3d",
						icon: 'red-packet',
						url: '/subpages/wallet/index'
					},
					{
						name: '收货地址',
						color: "#16c734",
						icon: 'map',
						url: '/pages/my/address/index'
					}
				],
				list: [],


			})
			onLoad((option) => {
				getData()
				store.getUserInfo()
			})
			// 服务开关
			const asyncChange = (e) => {
				console.log(e)
				uni.showModal({
					content: e ? '确定要开启服务？' : '关闭服务后将不接受预约,确定要关闭服务吗？',
					success: async (res) => {
						if (res.confirm) {
							await serverStatusApi()
							store.getUserInfo()
						}
					},
				});
			}

			const scanCode = () => {
				uni.scanCode({
					success: async(res) => {					
						uni.showLoading({
							title: "收款中.."
						})						
						try {
							await orderCheckApi(
								 res.result
							)						
							uni.showToast({
								title: '收款成功',
								icon: 'success',
								duration: 1000
							});							
							uni.hideLoading()
						
						} catch {

							uni.hideLoading()
						}
						
					},
					fail: (err) => {
						console.error('扫码失败：' + err);
					}
				});
			}

			const getData = async () => {
				const {
					data
				} = await getorderListApi({
					pageSize: 10,
					page: 1,
				})
				state.list = data.records
			}
			
			const goPage = (item) => {
				if(!item.url){
					scanCode()
					return false
				}
				uni.navigateTo({
					url: item.url
				})
			}
			return {
				...toRefs(state),
				goPage,
				asyncChange,
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user_box {
		width: 100%;
		height: 360rpx;
		background-color: #17253D;
		position: relative;

		.user_Info {
			width: 100%;
			padding: 150rpx 50rpx 20rpx 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.user_name {
				color: #fff;
				margin-left: 20rpx;

				text {
					padding: 0 8rpx;
				}

				.txt_n {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.title1 {
		width: 100%;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.title1_1 {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			image {
				width: 8%;
				height: 10%;
				margin: 0 1% 0 2%;
			}

			text {
				font-size: 30rpx;
				color: white;
			}
		}

		.title1_2 {
			width: 30%;
			height: 80%;
			background-color: white;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			font-size: 28rpx;

			view {
				width: 45%;
				height: 85%;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.title2 {
		width: 100%;
		padding-top: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.title2_left {
			width: 30%;
			height: 100%;

			image {
				width: 50%;
				height: 100%;
			}
		}

		.title2_right {
			width: 70%;
			height: 100%;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			flex-direction: column;
			color: white;

			.title2_right_name {
				margin: 2% 0;
			}
		}
	}

	.notice {
		width: 100%;
	}

	.swicth {
		width: 100%;
		height: 5%;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view:nth-child(1) {
			width: 80%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 35rpx;

			text:nth-child(1) {
				margin: 0 0 0 5%;
			}

			text:nth-child(2) {
				font-size: 30rpx;
				color: #ACACAC;
			}
		}

		view:nth-child(2) {
			width: 20%;
			height: 100%;
			position: relative;

			text {
				position: absolute;
				top: 27%;
				left: 23%;
				font-size: 28rpx;
				color: white;
			}
		}
	}

	.shuju {
		width: 100%;
		height: 12%;
		background-color: white;
		margin: 5% 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.shuju1 {
			width: 30%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #A4A4A4;

			text {
				color: black;
				font-size: 40rpx;
				font-weight: 500;
				margin: 5% 0;
			}
		}
	}

	.navList {
		width: 100%;
		padding: 20rpx 0;
		background-color: white;

		.grid-text {
			line-height: 50rpx;
			font-size: 30rpx;
		}
	}

	.fx {
		width: 100%;
		height: 20%;
		margin: 5% 0;
		background-color: white;

		.fx_title {
			width: 100%;
			height: 30%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view:nth-child(1) {
				font-size: 35rpx;
				margin-left: 5%;
			}

			view:nth-child(2) {
				width: 30%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-right: 5%;

				image {
					width: 15%;
					height: 100%;
				}
			}
		}

		.tuList {
			width: 100%;
			height: 70%;
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					width: 15%;
					height: 100%;
				}

				text {
					font-size: 50rpx;
				}
			}
		}
	}

	.orderList {
		width: 100%;
		background-color: white;
		margin-top: 20rpx;

		.orderList_title {
			width: 100%;
			height: 5vh;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			view:nth-child(1) {
				margin-left: 3%;
			}

			view:nth-child(2) {
				margin-right: 3%;
				color: #999;
				font-size: 26rpx;
			}
		}

		.orderList_content {


			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 20rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #eaeaea;

			.orderList_content_left {
				width: 140rpx;
				height: 100%;
				display: flex;
				align-items: center;

			}

			.orderList_content_right {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.right_title1 {
					flex: 1;
					height: 100%;

					view:nth-child(2) {
						color: #999;
						font-size: 28rpx;
					}
				}

				.content_price {
					width: 180rpx;
					height: 100%;
					align-items: center;
					justify-content: center;

					view {
						text-align: right;
					}

					view:nth-child(2) {
						color: #767676;
					}
				}
			}
		}

		.orderList_down {
			width: 100%;

			.orderList_down_1 {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
			}

			.orderList_down_2 {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-bottom: 20rpx;

				view {
					margin-left: 20rpx;
				}
			}

			.orderList_down_3 {
				width: 100%;
				height: 3vh;
				font-size: 28rpx;
				margin-left: 3%;
				color: #767676;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				text {
					color: #CBCBCB;
				}
			}
		}
	}
</style>